<template>
  <view class="by_content">
     <Search></Search>
    <div class="commodity" v-for="obj in commodity" :key="obj.id">
      <div class="commodity_img">
        <img :src="obj.img" alt="">
      </div>
      <div class="commodity_name">{{ obj.name }}</div>
      <div class="commodity_type">{{ obj.type }}</div>
      <div class="commodity_price">${{ obj.price }}</div>
    </div>
  </view>
</template>

<script>
import Search from '../../components/Search/Search.vue'
export default {
  data () {
    return {
      commodity: [
        {
          id: 1,
          name: 'Obardans',
          img: '',
          type: 'Lorem ipsum dolor sit ',
          price: '18'
        },
        {
          id: 2,
          name: 'Embosil',
          img: '',
          type: 'Lorem ipsum dolor sit ',
          price: '18'
        },
        {
          id: 2,
          name: 'Amios',
          img: '',
          type: 'Lorem ipsum dolor sit ',
          price: '18'
        },
        {
          id: 3,
          name: 'Peromag',
          img: '',
          type: 'Lorem ipsum dolor sit ',
          price: '18'
        },
        {
          id: 2,
          name: 'Obardans',
          img: '',
          type: 'Lorem ipsum dolor sit ',
          price: '18'
        },
        {
          id: 3,
          name: 'Obardans',
          img: '',
          type: 'Lorem ipsum dolor sit ',
          price: '18'
        },
        {
          id: 4,
          name: 'Obardans',
          img: '',
          type: 'Lorem ipsum dolor sit ',
          price: '18'
        },
        {
          id: 5,
          name: 'Obardans',
          img: '',
          type: 'Lorem ipsum dolor sit ',
          price: '18'
        },
        {
          id: 6,
          name: 'Obardans',
          img: '',
          type: 'Lorem ipsum dolor sit ',
          price: '18'
        },
        {
          id: 7,
          name: 'Obardans',
          img: '',
          type: 'Lorem ipsum dolor sit ',
          price: '18'
        },
      ]
    };
  },
  components: {
    Search,
  }
}
</script>

<style lang="scss">
.by_content {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  padding: 0 48rpx;
  .commodity {
    margin-top: 48rpx;
    font-family: Plus Jakarta Sans;
    letter-spacing: 0.004999999888241291%;
    text-align: left;
    .commodity_img {
      width: 308rpx;
      height: 308rpx;
      border-radius: 20rpx;
      overflow: hidden;
      background:rgb(217, 217, 217);

      img {
        width: 100%;
        height: 100%;
      }
    }

    .commodity_name {
      margin-top: 16rpx;
      color: rgb(23, 23, 37);
      font-size: 32rpx;
      font-weight: 700;
      line-height: 48rpx;
    }

    .commodity_type {

      color: rgb(120, 130, 138);
      font-size: 24rpx;
      font-weight: 400;
      line-height: 40rpx;


    }

    .commodity_price {
      color: rgb(23, 23, 37);
      font-size: 28rpx;
      font-weight: 700;
      line-height: 44rpx;
    }
  }
}
</style>
